<template>
  <div class="order">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="电话咨询" />
    <div class="bar"></div>
    <div class="serve box">
      <div class="title">{{title}}</div>
      <div class="serve-content">
        <div class="left">
          <div class="price">￥{{money}}</div>
          <div class="time label">{{time}}</div>
        </div>
        <div class="right">
          <navigator class="state" url="/pageIndex/menu/explain">说明</navigator>
        </div>
      </div>
    </div>
    <div class="box type-box">
      <div class="type">
        <text class="red-text">*</text>
        <text class="type-title">问题类型:</text>
        <picker class="picker" @change="handlePick" range-key="title" :range="cateList">
          <div class="picker-content">
            <text class>{{chooseData[0].title}}</text>
            <text class="iconfont icon-qianjin"></text>
          </div>
        </picker>
        <!-- <div class="picker">
          <div class="picker-content" @click="handleShow">
            <text class>{{chooseData[0].title}}-{{chooseData[1].title}}</text>
            <text class="iconfont icon-qianjin"></text>
          </div>
        </div> -->
      </div>
    </div>
    <div class="box">
      <div class="item">
        <div class="time label">{{categroy}}</div>
        <div class="price">￥{{money}}元</div>
      </div>
    </div>
    <div class="box">
      <div class="item">
        <div class="label">
          <text>佣金抵扣</text>
          <text class="commission">{{real_commission}}元</text>
        </div>
        <checkbox-group @change="handleCheck">
          <checkbox class="check" color="#ABB2CE" value="true" />
        </checkbox-group>
      </div>
    </div>
    <div class="box">
      <div class="item">
        <div class="time label">共需支付</div>
        <div class="price">￥{{totalMoney}}元</div>
      </div>
    </div>
    <button class="submit" @click="handlePay">确认支付</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "电话咨询服务",
      categroy: "电话咨询",
      money: 20,
      onlineMoney: 20,
      commission: "18.00",
      time: "",
      check: false,
      chooseData: [],  //  选择的大类
      cateList: [],  // 初始化大类数据
      lid: '', // 律师id
      type: 0 // 订单类型
    };
  },
  async onLoad(e) {
    this.lid = e.lid || '';
    this.type = e.type;
    this.serve = e.serve;
    const res = await this.$gh.request("member.order", {
      data: {
        op: "getPreOrder",
        consultation_type: 2
      }
    }).catch((err) => {
      if(err.code == 41009){
        this.$store.dispatch('login')
      }
    })
    const {
      charge,
      duration,
      time_unit,
      member,
      consultation_type
    } = res.data.list;
    this.money = parseFloat(charge);
    const unit = time_unit == "minute" ? "分钟" : "天";
    this.time = duration + unit;
    this.commission = parseFloat(member.credit1);
    this.type = parseInt(consultation_type);
  },
  onShow(){
    // 获取分类
    const that = this
    uni.request({
      url: that.$store.state.baseUrl + "member.index",
      data: {
        op: "getConsultation",
        lawyer_id: that.lid
      },
      success(res) {
        that.cateList = res.data.data.list; // 分类数据
        that.chooseData = [that.cateList[0]]
      }
    });
  },
  computed: {
    real_commission() {
      const dikou = this.commission > this.money ? this.money : this.commission;
      return dikou;
    },
    totalMoney() {
      let temp = this.check ? this.money - this.real_commission : this.money;
      return temp;
    }
  },
  methods: {
    handlePick(e) {
      const index = e.detail.value
      this.chooseData = [ this.cateList[index] ]
      console.log(this.cateList[index]);
    },
    async handlePay() {
      let deduction = this.check ? 1 : 0;
      let data = {
        op: "addOrderTelephony",
        service_type: 1,
        consultation_type: 2,
        mid: this.chooseData[0].id,
        deduction
      };
      if (this.serve == 2) {
        // 一对一咨询
        data.lawyer_id = this.lid;
        data.service_type = 2;
      }
      // 除了在线咨询，其他都是请求下单确认接口
      await this.$store.dispatch("modal", "是否确认支付");
      const resDefault = await this.$gh
        .request("member.order", {
          data
        })
        .catch(err => {
          uni.showToast({
            mask: true,
            icon: "none",
            title: err.errmsg,
            duration: 2000
          });
        });
      if (resDefault.code == 200 && !resDefault.data.list.payment_launch) {
        // 佣金足够扣，不需要支付
        uni.showToast({
          mask: true,
          icon: "success",
          title: "支付成功",
          duration: 2000
        });
        let url = this.serve == 2 ? "/pageMy/menu/oneByOne" : "/pageMy/menu/paidConsulting";
        uni.navigateTo({
          url
        });
      } else if (
        resDefault.code == 200 &&
        resDefault.data.list.payment_launch
      ) {
        // 调起微信支付
        let url = this.serve == 2 ?  "/pageMy/menu/oneByOne" : "/pageMy/menu/paidConsulting"
        // 调起微信支付
        this.$gh.pay(resDefault.data.list.id).then(() => {
          // 跳转
          uni.reLaunch({
              url
          });
        }).catch(err => {
          uni.showToast({
            icon: 'none',
            title: '支付失败',
            duration: 2000
          });
        });
      }
    },
    handleCheck(e) {
      e.detail.value.length == 1 ? (this.check = true) : (this.check = false);
    },
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.order {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .bar {
    height: 10px;
    background-color: #f9faff;
  }
  .box {
    padding: 18rpx 27rpx;
    border-bottom: 2rpx solid #eee;
    .label {
      font-size: 26rpx;
      color: @font-color;
    }
    .price {
      font-size: 24rpx;
      color: red;
    }
  }
  .type-box {
    border: none;
  }
  .serve {
    .title {
      font-size: 30rpx;
      color: @deep-color;
      margin-bottom: 10rpx;
    }
    .serve-content {
      .gh-between();
      .left {
        .flex();
        .time {
          margin-left: 20rpx;
        }
      }
      .state {
        font-size: 24rpx;
        color: #fea388;
      }
    }
  }
  .type {
    display: flex;
    align-items: flex-start;
    .red-text {
      color: red;
      font-weight: 600;
    }
    .type-title {
      font-size: 30rpx;
      color: #6c76a7;
      margin-right: 35rpx;
    }
    .picker {
      flex: 1;
      .picker-content {
        color: @font-color;
        font-size: 26rpx;
        padding-bottom: 20rpx;
        border-bottom: 2px solid #f4f4f4;
        .gh-between();
      }
      .icon-qianjin {
        font-size: 26rpx;
      }
    }
  }
  .item {
    .gh-between();
    .commission {
      margin-left: 20rpx;
    }
    .check {
      transform: scale(0.7);
    }
  }
  .submit {
    .gh-center();
    width: 620rpx;
    height: 80rpx;
    margin: 65rpx auto;
    background-color: #849aff;
    border-radius: 40rpx;
    color: #fff;
    font-size: 36rpx;
    border: none;
  }
}
</style>